<template>
	<view class="cultural-creativity">
		<!-- 轮播 -->
		<view class="nav-box">
			<view @click="handleSwiper">
				<u-swiper height="720rpx" :list="bannerData" @change="e => current = e.current" radius='0' bgColor="#FFFFFF"
					:autoplay="false" :indicator="false" indicatorStyle="bottom: 135rpx;" keyName="picUrl" :circular="false">
					<view slot="indicator" class="indicator">
						<view class="indicator__dot" v-for="(item, index) in bannerData" :key="index"
							:class="[index === current && 'indicator__dot--active']">
						</view>
					</view>
				</u-swiper>
			</view>
			<view class="nav app-pages" :style="navStyle">
				<u-icon name="arrow-left" color="#FFFFFF" size="20" @click="handleBack"></u-icon>
				<view style="width: 432rpx;display: inline-block;margin-left: 32rpx;" @click="handleSearch">
					<u--input placeholder="搜索内容" shape="circle" prefixIcon="search" disabled disabledColor="#FFFFFF"
						prefixIconStyle="font-size: 22px;color: #cccccc;" :customStyle="inputCustomStyle"></u--input>
				</view>
			</view>
		</view>
		<!-- 热卖爆款 -->
		<view class="hot">
			<home-hot ref="home-hot"></home-hot>
		</view>
		<!-- 领劵中心 -->
		<view class="app-pages receive">
			<home-receive ref="home-receive"></home-receive>
		</view>
		<!-- 列表 -->
		<view class="app-pages list">
			<view class="tab">
				<view class="tab-item" :class="tabIndex == index ? 'active' : ''" @click="handleTabClick(index)"
					v-for="(item,index) in tabData" :key="index">
					<text class="name">{{item}}</text>
				</view>
			</view>
			<home-list ref="home-list" :listData="homeListData"></home-list>
			<view>
				<u-loadmore :status="status" bgColor="#F7F7F7" marginTop="20"/>
			</view>
		</view>
	</view>
</template>
<script>
	import homeHot from "../components/home-hot.vue";
	import homeList from "../components/home-list.vue";
	import homeReceive from "../components/home-receive.vue";
	import {
		listBannerApi,
		listAllShopping,
		listHotApi
	} from "@/culturalCreativity/http/home.js";
	import {
		realmName
	} from "@/http";
	export default {
		components: {
			homeHot,
			homeReceive,
			homeList
		},
		data() {
			return {
				bannerData: [],
				tabData: ['全部', '推荐', '新品'],
				tabIndex: 0,
				current: 0,
				pageNum: 1,
				homeListData: [],
				status: 'nomore',
				lockMore: true, //展示不出更多数据
				readding:false,
				httpLoading: true
			}
		},

		methods: {
			handleSwiper(){ //轮播点击
				uni.navigateTo({
					url:"/culturalCreativity/common/shoppingDetails?id="+this.bannerData[this.current].goodsId
				});
			},
			handlePageNumData() {
				setTimeout(()=>{
					if(this.httpLoading) return;
					this.handleTabClick(this.tabIndex,true);
				},200);
			},
			async handleTabClick(index,blo) {
				this.tabIndex = index;
				let res;
				if(!blo){
					this.pageNum = 1;
					this.lockMore = true;
					this.homeListData = [];
				}
				if (!this.lockMore) return;
				this.httpLoading = false;
				this.status = 'loading';
				if (index == 0) {
					res = await listAllShopping({
						pageNum: this.pageNum, //this.pageNum
						pageSize: 20,
						productIntroduction: 1 //上架的商品
					});
					this.homeListData = [...this.homeListData,...this.getListShoopingData(res.data.rows)];
					this.pageNum = this.pageNum + 1;
					if (res.data.total <= this.homeListData.length) {
						this.lockMore = false;
					}
					this.status = 'nomore';
					this.httpLoading = true;
					return;
				};
				
				this.lockMore = true;
				res = await listHotApi({
					id: index + 1,
					pageNum: this.pageNum,
					pageSize: 20
				});
				this.pageNum = this.pageNum + 1;
				this.homeListData = [...this.homeListData,...this.getListShoopingData(res.data.rows)];
				this.httpLoading = true;
				this.status = 'nomore';
				if (res.data.total <= this.homeListData.length) {
					this.lockMore = false;
				}
			},
			getListShoopingData(options) {
				return options.map(item => {
					item._price = item.mealCardPay || 0;
					item._image = `${realmName}${item.goodsPicAddress.split(",")[0]}`;
					item._name = item.goodsName;
					return item;
				});
			},
			async init() {
				try {
					if(!this.readding) this.handleTabClick(0); //全部商品列表加载
					this.readding = true;
					this.$refs['home-hot'].init();
					this.$refs['home-receive'].init();
					let res1 = await listBannerApi({ //轮播图
						pageNum: 1,
						pageSize: 9999,
						state: 1,
					});
					this.bannerData = res1.data.rows.map(item => {
						item.picUrl = `${realmName}${item.picUrl}`;
						return item;
					});
				} catch (e) {
					console.error('文创首页报错:', e)
				}
			},
			handleSearch() {
				uni.navigateTo({
					url: "/culturalCreativity/home/search"
				});
			},
			handleBack() {
				uni.reLaunch({
					url: "/pages/home/index"
				});
			}
		},
		computed: {
			inputCustomStyle() {
				let res = wx.getMenuButtonBoundingClientRect();
				return {
					'height': res.height + 'px',
					'padding-top': '0rpx',
					'padding-bottom': '0rpx',
					'background-color': '#FFFFFF',
					'border': 'none'
				};
			},
			navStyle() {
				let res = wx.getMenuButtonBoundingClientRect();
				return `padding-top:${res.top}px;background-color: transparent;`;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.tab {
		display: flex;

		.tab-item {
			position: relative;
			font-size: 32rpx;
			color: rgba(193, 193, 193, 1);
			height: 45rpx;
			width: 64rpx;

			&+.tab-item {
				margin-left: 32rpx;
			}

			.name {
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				text-align: center;
				z-index: 1;
			}

			&.active {
				color: rgba(31, 31, 31, 1);

				&::after {
					content: "";
					position: absolute;
					left: 0;
					right: 0;
					bottom: -2rpx;
					height: 16rpx;
					background-color: #F6CC9E;
					z-index: 0;
					border-radius: 30rpx;
				}
			}
		}
	}

	.app-pages.list {
		margin-top: 50rpx;
	}

	.app-pages.receive {
		margin-top: 280rpx;
	}

	.cultural-creativity {
		position: relative;
		min-height: 100vh;
		background-color: rgba(243, 245, 247, 1);
		padding-bottom: 100rpx;
	}

	.nav-box {
		position: relative;

		.nav {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			padding-bottom: 1px;
			display: flex;
			z-index: 99;
		}
	}

	.hot {
		position: absolute;
		top: 577rpx;
		left: 32rpx;
		right: 32rpx;
		z-index: 1;
	}

	.indicator {
		@include flex(row);
		justify-content: center;

		&__dot {
			height: 6px;
			width: 6px;
			border-radius: 100px;
			background-color: rgba(255, 255, 255, 0.35);
			margin: 0 5px;
			transition: background-color 0.3s;

			&--active {
				background-color: #ffffff;
			}
		}
	}

	.indicator-num {
		padding: 2px 0;
		background-color: rgba(0, 0, 0, 0.35);
		border-radius: 100px;
		bottom: 135rpx;
		width: 35px;
		@include flex;
		justify-content: center;

		&__text {
			color: #FFFFFF;
			font-size: 12px;
		}
	}
</style>
